<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg"
	href="../resources/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Getting Started | Semantic UI</title>

<meta name="description"
	content="Getting up and running with Semantic UI" />
<meta name="keywords"
	content="html5, ui, library, framework, javascript" />

<script src="../resources/static/libs/detect.min.js"></script>
<script src="../resources/static/libs/jquery.min.js"></script>
<script src="../resources/static/libs/clipboard-polyfill.js"></script>
<script src="../resources/static/libs/cookies.js"></script>
<script src="../resources/static/libs/jquery.easing.1.3.js"></script>
<script src="../resources/static/libs/highlight.js"></script>
<script src="../resources/static/libs/jquery.history.js"></script>
<script src="../resources/static/libs/tablesort.min.js"></script>
<script src="../resources/dist/semantic.js"></script>
<script src="../resources/js/docs.js"></script>

<link rel="stylesheet" type="text/css" class="ui"
	href="../resources/dist/semantic.css">
<link rel="stylesheet" type="text/css"
	href="../resources/static/style/docs.css">
<link rel="stylesheet" type="text/css"
	href="../resources/static/style/rtl.css">
<style type="text/css">
#frameMain {
	height: 1100px;
}

@media only screen and (max-width: 768px) {
	#frameMain {
		height: 550px;
	}
}

@media only screen and (max-width: 700px) {
	.ui.fixed.menu {
		display: none !important;
	}
	.secondary.pointing.menu .item, .secondary.pointing.menu .menu {
		display: none;
	}
	.secondary.pointing.menu .toc.item {
		display: block;
	}
	.masthead.segment {
		min-height: 350px;
	}
	.masthead h1.ui.header {
		font-size: 2em;
		margin-top: 1.5em;
	}
	.masthead h2 {
		margin-top: 0.5em;
		font-size: 1.5em;
	}
}
</style>
<script type="text/javascript">
	window.liveSettings = {
		api_key : '9ede3015b9f84c1aabc81ab839c55d74',
		parse_attr : [ 'data-title', 'data-content' ],
		detectlang : false,
		autocollect : true,
		ignore_tags : [ 'i', 'code', 'pre' ],
		parse_attr : [ 'data-title', 'data-content', 'data-text' ],
		ignore_class : [ 'code', 'anchor' ]
	};
	
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
</head>
<body id="example" class="started" ontouchstart="">
	<!-- 整体 -->
	<div class="pusher" id="rrapp">
		<div class="full height" style="height: inherit;">
			<!-- 左侧导航 通过Vue实现 -->
			<div class="toc">
				<div class="ui vertical inverted sticky menu">
					<!-- 固定菜单 -->
					<div class="item">
						<a class="ui logo icon image" href="/"> <img
							src="../resources/images/logo.png">
						</a> <a href="/"><span style="margin-left: 30px;">首 页</span></a>
					</div>
					<a class="item"> <span style="margin-left: 10px;">欢迎您，
							{{user.userName}}！</span>
					</a>
					<!-- 结束固定菜单 -->
					<!-- 使用Vue,实现菜单 -->
					<div class="item" v-for="menuHead in menuList">
						<div class="header">{{menuHead.name}}</div>
						<div class="menu">
							<a class="item" v-for="menuBody in menuHead.list"
								v-bind:href="'#'+menuBody.url">{{menuBody.name}} </a>
						</div>
					</div>
					<!-- 结束使用Vue,实现菜单 -->
				</div>
				<!-- 结束 -->
			</div>
			<!-- 身体部分 -->
			<div class="article">
				<!-- 主界面 -->
				<section class="content" style="background: #fff;">
					<div class="ui text menu">
						<div class="item">
							<img src="/images/new-school.jpg">
						</div>
						<a class="browse item"> 菜单 <i class="dropdown icon"></i>
						</a>
						<div class="item">
						<div class="ui icon input">
							<input type="text" placeholder="Search mail..."> <i
								class="search icon"></i>
						</div>
					</div>
					</div>
					<iframe id="frameMain" scrolling="yes" frameborder="0"
						style="width: 100%; overflow: visible; background: #fff;"
						:src="main"></iframe>
				</section>
			</div>
		</div>
		<script src="../resources/js/started.js"></script>
	</div>
	</div>
	<div class="ui black inverted vertical footer segment">
		<div class="ui center aligned container">
			<div class="ui stackable inverted grid">
				<div class="three wide column">
					<h4 class="ui inverted header">Community</h4>
					<div class="ui inverted link list">
						<a class="item"
							href="https://www.transifex.com/organization/semantic-org/"
							target="_blank">Help Translate</a> <a class="item"
							href="https://github.com/Semantic-Org/Semantic-UI/issues"
							target="_blank">Submit an Issue</a> <a class="item"
							href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join
							our Chat</a> <a class="item" href="/cla.html" target="_blank">CLA</a>
					</div>
				</div>
				<div class="three wide column">
					<h4 class="ui inverted header">Network</h4>
					<div class="ui inverted link list">
						<a class="item" href="https://github.com/Semantic-Org/Semantic-UI"
							target="_blank">GitHub Repo</a> <a class="item"
							href="http://forums.semantic-ui.com" target="_blank">User
							Forums</a> <a class="item" href="http://1.semantic-ui.com">1.xDocs</a>
						<a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
					</div>
				</div>
				<div class="seven wide right floated column">
					<h4 class="ui inverted teal header">帮助维护这个项目?</h4>
					<p>对项目的持续开发的支持可以来自于团队,个人</p>
					<form action="https://www.paypal.com/cgi-bin/webscr" method="post"
						target="_top">
						<input type="hidden" name="cmd" value="_s-xclick"> <input
							type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
						<button type="submit" class="ui large teal button">就是今天!</button>
					</form>
				</div>
			</div>
			<div class="ui inverted section divider"></div>
			<img src="../resources/images/logo.png"
				class="ui centered mini image">
			<div class="ui horizontal inverted small divided link list">
				Team & Develpor Author kirohuji</div>
		</div>
	</div>

	</div>
	</div>
	<script>
		window.less = {
			async : true,
			environment : 'production',
			fileAsync : false,
			onReady : false,
			useFileCache : true
		};
	</script>
	<script src="../resources/static/libs/less.min.js"></script>
	<script src="../resources/static/libs/vue.min.js"></script>
	<script src="../resources/static/libs/router.js"></script>
	<script src="../resources/static/libs/jquery.slimscroll.min.js"></script>
	<script src="../resources/js/manager.js"></script>
	<script src="../resources/static/libs/fastclick.min.js"></script>
</body>
</html>